<template>
	<view class="contianner">
		<view>
			<u-tabs :list="list" :is-scroll="false"  :current="current" active-color="#f07810" @change="change"
				bg-color="#fff1ac"></u-tabs>
		</view>
		<view class="">
			<u-notice-bar mode="horizontal" :list="annunciate"></u-notice-bar>
		</view>
		<tag v-if="active_head"></tag>
		<fuc_list></fuc_list>
		<view>
		<sq_fu v-if="active_head"></sq_fu>
		</view>
		<sq_ga v-if='active_back'></sq_ga>
		<u-loadmore :status="status" />
	</view>
</template>

<script>
	import sq_ga from '../../components/sq_game/sq_game.vue'
	import sq_fu from '../../components/square_function/square_function.vue'
	import tag from '../../components/tag/tag.vue'
	import fuc_list from '../../components/function_list/function_list.vue'
	export default {
		data() {
			return {
				annunciate: ['请大家文明发表言论，不涉及违规信息，文明你我他'],
				status: 'loadmore',
				active_head: true,
				active_back: false,
				list: [{ name: '心灵树洞', }, { name: '互动聊天' }],
				current: 0
			}
		},
		components: {
			sq_fu,
			sq_ga,
			tag,
			fuc_list
		},
		onReachBottom() {
			if (this.page >= 3) return
			this.status = 'loading'
			this.page = ++this.page
			setTimeout(() => {
				this.list += 10
				if (this.page >= 3) this.status = 'nomore'
				else this.status = 'loading'
			}, 2000)
		},
		methods: {
			change(index) {
				this.current = index
				if (index == 1) {
					this.active_back = true
					this.active_head = false
				} else {
					this.active_back = false
					this.active_head = true
				}
			},
		}
	}
</script>

<style lang="less">
	.contianner {
		width: 750rpx;
		height: 100vh;
		background-color: white;
	}
</style>
